<!DOCTYPE html>
<html lang="ZH-cn">
<head>
  <meta charset="UTF-8">
 <!--  <meta http-equiv="X-UA-Compateble" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1，maximum-scale=1,user-scalable=no"> 响应式 拒绝底部滑动条-->
  <title>home</title>
  <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
  <style>
      *{font-family: "Microsoft Yahei";font-size: 14px;}
	body{width:auto; min-width: 1200px;height: 100%; background: #fff;}
	.head_wrap{height: 120px;background: #fff;width:1200px;margin:0 auto;}
	.head_logo{min-width:360px;height: 120px;}
	.head_logo img{width:220px;height: 100px;margin-left: 100px;margin-top: 10px;cursor:pointer;}
	.head_logo h1{color: #F97B06}
	.head_search{margin-top: 40px;}
	.head_search .btn{border-top:1px solid rgb(204,204,204);border-bottom:1px solid rgb(204,204,204);padding-top:6px;}
	.center_wrap{background: #DDD;width:1200px;margin:0 auto;height: 100%}
	.center_title{width:100%;background-color: #ccc;height:40px;line-height: 40px; border-bottom :1px solid #fff;}
	.center_title span:first-child{font-size: 20px;padding-left:12px;}
	.center_title a{padding-right:12px; color: #000}
	.center_title span {font-weight: bolder;}
	.title{width: 100%;float: left;position: relative;min-height: 1px;}
	.largeImg{text-align: center}
	.largeImg .largeImgContent{max-width:100% !important; cursor: pointer }/*max-height: 800px;可设高度限制*/
    .footer_wrap{width: 1200px;margin:0 auto}
  </style>
</head>
<!--图片内容  及具体样式自己去换  基本大块 都有背景色  怕你区分不开   你自己去换掉 或者不要 链接自己去换-->
<body>
	<div class="head_wrap row">
		<div class="head_logo col-sm-4">
			<!-- <img src="__PUBLIC__/img/lunbo_02.jpg" alt=""> -->
			<h1>回忆是一种幸福</h1>
		</div>
		<div class="head_search col-sm-8">
			<div class="search_content row">
				<div class="col-xs-12 col-sm-8">
					<div class="input-group">
						<input type="text"  class="form-control search-query" placeholder="">
						<span class="input-group-btn">
							<button type="button" class="btn btn-purple btn-sm">
								搜索
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
							</button>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="center_wrap row">
		<div class="title">
			<p class="center_title">
				<span>最新图片</span>
				<a href="#" class="pull-right"> 更多>></a>
			</p>

		</div>
		<div class="col-sm-12">
			<div class="newimg_content">
				<div class="row">
					<!--原图容器-->

					<div class="col-sm-12 largeImg" style="display: none">
						<img class="largeImgContent" src="" alt="">
					</div>

					<!--缩略图 引用bootstrap缩略图   调整列数控制每行显示几张图片-->
					<volist name="list" id="vo">
						<div class="col-sm-6 col-md-3">
							<a href="#" class="thumbnail smallImg">
								<img src="{$vo.url}" onerror="this.src='__PUBLIC__/img/moren.jpg'" alt="...">
							</a>
						</div>
  					</volist>

<!-- 					<div class="col-sm-6 col-md-3">
						<a href="#" class="thumbnail smallImg">
							<img src="__PUBLIC__/img/psb6.jpg" onerror="this.src='__PUBLIC__/img/moren.jpg'" alt="...">
						</a>
					</div>
					<div class="col-sm-6 col-md-3">
						<a href="#" class="thumbnail smallImg">
							<img src="__PUBLIC__/img/psb6.jpg" onerror="this.src='__PUBLIC__/img/moren.jpg'" alt="...">
						</a>
					</div>
					<div class="col-sm-6 col-md-3 smallImg">
						<a href="#" class="thumbnail smallImg">
							<img src="__PUBLIC__/img/psb6.jpg" onerror="this.src='__PUBLIC__/img/moren.jpg'" alt="...">
						</a>
					</div> -->

				</div>
			</div>
		</div>
		<div class="title">
			<p class="center_title">
				<span>组图图片</span>
				<a href="#" class="pull-right"> 更多>></a>
			</p>
		</div>
		<div class="col-sm-12">
			<div class="groupimg_content">
				<div class="row">

			<volist name="zutu" id ="vo">
  					<div class="col-sm-4 col-md-2">
						<a href="#" class="thumbnail">
							<img src="{$vo.zutu}" imgtitle="周英秋傻B" class="imgcss" alt="...">
							      <div class="caption">
							        <h3>{$vo.zutu_name}</h3>
							        <p>{$vo.zutu_title}</p>
							       
							      </div>
						</a>
					</div>
			</volist>

                  <!--   <div class="col-sm-4 col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="__PUBLIC__/img/psb6.jpg" imgtitle="周英秋傻B" class="imgcss" alt="...">
                        </a>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="__PUBLIC__/img/psb6.jpg" imgtitle="周英秋傻B" class="imgcss" alt="...">
                        </a>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="__PUBLIC__/img/psb6.jpg" imgtitle="周英秋傻B" class="imgcss" alt="...">
                        </a>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="__PUBLIC__/img/psb6.jpg" imgtitle="周英秋傻B" class="imgcss" alt="...">
                        </a>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="__PUBLIC__/img/psb6.jpg" imgtitle="周英秋傻B" class="imgcss" alt="...">
                        </a>
                    </div>
 -->
				</div>
			</div>
		</div>

<volist name="ctypelist" id="v">
<div class="title">
			<p class="center_title">
				<span>{$v.ctype_name}</span>
				<a href="#" class="pull-right"> 更多>></a>
			</p>
		</div>
		<div class="col-sm-12">
			<div class="groupimg_content">
				<div class="row">

			<volist name="v.list" id ="g">
  					<div class="col-sm-4 col-md-2">
						<a href="#" class="thumbnail">
							<img src="{$g.url}" imgtitle="周英秋傻B" class="imgcss" alt="...">
						</a>
					</div>
			</volist>
				</div>
			</div>
		</div>
</volist>
	</div>
    <div class="footer_wrap row">
        <div class="col-sm-12">
            <p style="color:red;font-size: 24px;"> 阿来是 傻逼啊</p>
        </div>
    </div>
</body>
<script src="__PUBLIC__/js/jquery-2.1.1.min.js"></script>
<script>

	$(function(){
		$(".smallImg").unbind("click").bind("click",function(){
			var src = $(this).find("img").attr("src");
			$(this).parent().siblings(".largeImg").find("img").attr("src",src);
			$(this).parent().siblings(".largeImg").css("display","block");

			$(this).parent().parent().find(".smallImg").hide();
			$()

		})

		$(".largeImgContent").unbind("click").bind("click",function(){
			$(this).parent(".largeImg").css("display","none");
			$(this).parent().parent().find(".smallImg").show();

		})

//鼠标放在图片上
/*$(".imgcss").mouseover(function(){   
      $(this).parent().css({'background':'#ccc',' z-index': '-11'});
	})*/

})
</script>

</html>
